<template>
  <div class="info-wrap">
    <Title :style="{margin: dialog ? '0px 0 16px 0' : '10px 0 16px 0'}" title="上刊状态" style="font-size:16px"/>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="journalStatusRules"
      :label-width="labelWidth"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32">
      <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
        <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="上刊状态">
            <div class="flex-center">
              <selectWithoutHttp
                v-model="formData.additionalKey.journalStatus"
                :list-data="journalStatusOptions"
                clearable
                class="width240"
                style="margin-right: 10px;"
                placeholder="请选择"
              />
              <InfoIcon v-if="showTip" content="商务独家/经纪独家的账号需要进行上刊流程审批" style="width: 16px;height: 16px;margin-left: 4px;" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="选号状态">
            <selectWithoutHttp
              v-model="formData.additionalKey.selectionStatus"
              :list-data="selectStatusOptions"
              clearable
              class="width240"
              style="margin-right: 10px;"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="上刊日期">
            <el-date-picker
              v-model="formData.additionalKey.publicationTime"
              type="date"
              size="small"
              class="width240"
              placeholder="请选择"
              format="yyyy/MM/dd"
              value-format="timestamp"
              @change="publicationTimeChange"/>
          </el-form-item>
        </el-col> -->
        <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="上刊月份" prop="publicationMonth">
            <el-date-picker
              v-model="formData.additionalKey.publicationMonth"
              type="month"
              size="small"
              class="width240"
              placeholder="选择月份"
              value-format="timestamp"
              format="yyyy/MM"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col v-if="isJournalPlatform" :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="上刊节点" prop="journalNode">
            <selectWithoutHttp
              v-model="formData.additionalKey.journalNode"
              :list-data="journalNodeOptions"
              class="width240"
              style="margin-right: 10px;"
              placeholder="请选择"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { journalStatusOptions, selectStatusOptions, journalNodeOptions } from '@/utils/const/resouce';
import { SIGN_DETAIL_STATUS } from '@/utils/const/resouce';
import mixins from './mixins';
export default {
  components: {
    selectWithoutHttp
  },
  mixins: [mixins],
  model: {
    prop: 'modelData',
    event: 'changeValue'
  },
  props: {
    modelData: {
      type: Object,
      default: () => ({})
    },
    rowSpan: {
      type: Number,
      default: 12
    },
    isSigned: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showTip: false,
      journalStatusOptions,
      selectStatusOptions,
      journalNodeOptions
    };
  },
  computed: {
    journalStatusRules() {
      const validateType = (msg, item) => {
        return (rule, value, callback) => {
          if (item || item === 0) {
            callback();
          } else {
            callback(new Error(msg));
          }
        };
      };
      let rules = {};
      if (this.isSigned) { // 已签约账号必填
        rules = {
          journalNode: [{ required: true, trigger: 'change', validator: validateType('请选择上刊节点', this.formData.additionalKey.journalNode) }],
          publicationMonth: [{ required: true, trigger: 'change', validator: validateType('请选择上刊月份', this.formData.additionalKey.publicationMonth) }]
        };
      }
      return this.isJournalPlatform ? { ...rules, ...this.formRules } : this.formRules;
    }
  },
  watch: {
    'formData.additionalKey.journalStatus': {
      handler(val) {
        this.showTip = val === 1 && [1, 3].includes(this.formData.additionalKey.cooperationOption);
      },
      deep: true
    },
    'formData.additionalKey.cooperationOption': {
      handler() {
        this.handleJournalStatus();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleJournalStatus() {
      const { isContract, signStatus, additionalKey, upOnlineStatus } = this.formData;
      if (!additionalKey.journalStatus) {
      // 1、签约状态为【已签约】，且同步到账号资源后，合作方式为【商务挂靠】或【其他】的账号上刊状态要改为【已签约-上刊】，支持手动编辑
        if (isContract && signStatus === 1 && [2, 4].includes(additionalKey.cooperationOption)) {
          this.formData.additionalKey.journalStatus = 1;
        }
        // 2、签约状态为【已签约】，且同步到账号资源后，合作方式为【商务独家】或【经纪独家】的账号，状态默认为下刊；发起上刊流程，且上刊流程通过后，自动变更上刊状态为【已签约-上刊】
        if (isContract && signStatus === 1 && [1, 3].includes(additionalKey.cooperationOption)) {
          this.formData.additionalKey.journalStatus = upOnlineStatus === 2 ? 1 : 3;
        }
      }
    },
    publicationTimeChange(val) {
      const isFitStatus = [SIGN_DETAIL_STATUS.SIGNED, SIGN_DETAIL_STATUS.RENEWAL, SIGN_DETAIL_STATUS.AUTO_RENEWAL].includes(this.formData.moreAccountInfo.signDetailStatus);
      if (val && isFitStatus && !this.formData.additionalKey.journalStatus) {
        this.$set(this.formData.additionalKey, 'journalStatus', 1);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.width240 {
  width: 240px;
  ::v-deep {
    .el-select, .el-input {
      width: 240px;
    }
  }
}
</style>
